<template>
  <div style="background-color: #f1f1f1;">
    <el-card v-show="indexTool" style="margin:0 10px;">
      <el-button type="primary" @click="qxdoSomeCz()" size="mini">取消操作</el-button>
      <el-button type="success"  size="mini" @click="doAdd()">添加</el-button>
    </el-card>
    <!-- 文档 https://blog.csdn.net/weixin_39423672/article/details/79875963 -->
    <grid-layout
      :layout="layout"
      :is-draggable="indexTool"
      :is-resizable="indexTool"
      :margin="[10, 10]"
      :col-num="16"
      :row-height="50"
      :use-css-transforms="true"
      :vertical-compact="true"
    >
      <!-- <grid-item @moved="movedEvent" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i"> -->
      <grid-item
        class="item"
        @moved="movedEvent"
        @resized="resizeEvent"
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <div class="title">
          <div class="name">
            <!-- <i :class="item.zjIcon || 'el-icon-menu'"></i> -->
            <i :class="item.icon"></i>
            <!-- <i class="el-icon-money"></i> -->
            {{item.title}}
          </div>
          <div class="del">
            <i v-show="indexTool" @click="doDel(item.i)" class="el-icon-close"></i>
          </div>
        </div>
        <div class="content">
          <component v-bind:is="item.compentent"></component>
        </div>
      </grid-item>
    </grid-layout>
    <el-dialog title="新增桌面" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-table
        stripe
        :data="tableData"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%"
        size="mini"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="60px" align="center" label="序号"></el-table-column>
        <el-table-column align="center" prop="title" label="桌面名称"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ZjOne from "./syzj/zj-one";
import ZjTwo from "./syzj/zj-two";
import ZjThree from "./syzj/zj-three";
import ZjFour from "./syzj/zj-four";
import ZjFive from "./syzj/zj-five";
import ZjSix from "./syzj/zj-six";
import ZjGzrl from "./syzj/zj-gzrl";
export default {
  components: { ZjOne, ZjTwo, ZjThree, ZjFour, ZjFive, ZjSix,ZjGzrl },
  data() {
    return {
      layout: [],
      userId: "",
      sjData: [],
      status: false,
      dialogFormVisible: false,
      multipleTable: [],
      tableData: []
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    '$store.state.init.isCollapse':function(v){
      // if(v){
        // 重新渲染
       this.$nextTick(()=>{
          this.init();
       })
      // }
    }
  },
  computed:{
    indexTool:function(){
      return this.$store.state.settings.indexTool
    }
  },
  methods: {
    //触发移动事件
    movedEvent: function(i, newX, newY, e) {
      if(this.indexTool == false){
        return;
      }
      // console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
      let params = {
        id: i,
        xAxis: newX,
        yAxis: newY
      };
      this.$api
        .formPost(  "/api/biz/potal/potRoleUserRef/doModById", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
          }
        }).catch(err=>{
          console.log(err)
        })
    },
    resizeEvent: function(i, newH, newW) {
      if(this.indexTool == false){
        return;
      }
      // console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
      let params = {
        id: i,
        wAxis: newW,
        hAxis: newH
      };
      this.$api
        .formPost(  "/api/biz/potal/potRoleUserRef/doModById", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
          }
        }).catch(err=>{
          console.log(err)
        });
    },
    //逻辑删除
    doDel(e) {
      // console.log(e);
      let params = {
        id: e,
        isShow: "0"
      };
      this.$api
        .formPost(  "/api/biz/potal/potRoleUserRef/doModById", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.init();
          }
        }).catch(err=>{
          console.log(err)
        });
    },
    //取消操作
    qxdoSomeCz() {
      this.$store.commit("indexTool",false);
    },
    //新增
    doAdd() {
      let params = {
        userId: this.userId,
        isShow: "0"
      };
      this.$api
        .formPost(  "/api/biz/potal/potSet/doGetListByUserId", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.tableData = res.retBody;
          }
        }).catch(err=>{
          console.log(err)
        });
      this.dialogFormVisible = true;
    },
    //添加桌面方法
    handleAdd() {
      if (this.multipleSelection == "") {
        this.dialogFormVisible = false;
        return;
      }
      // console.log(this.multipleSelection);
      let params = {
        potSetList: this.multipleSelection
      };
      this.$api
        .post(  "/api/biz/potal/potRoleUserRef/doSubmit", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.init();
            this.$message({
              message: "添加成功！",
              type: "success"
            });
            this.dialogFormVisible = false;
          } else {
            this.$message({
              message: "添加失败！",
              type: "error"
            });
          }
        }).catch(err=>{
          console.log(err)
        });
    },
    //列表选择框 选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    init() {
      this.layout = [];
      var user = JSON.parse(sessionStorage.getItem("user"));
      this.userId = user.id;
      let params = {
        userId: this.userId,
        isShow: "1"
      };
      /** 
      this.$api
        .formPost(  "/api/biz/potal/potSet/doGetListByUserId", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            var data = res.retBody;
            // console.log(data);
            for (const obj of data) {
              var t = {
                x: parseInt(obj.xAxis),
                y: parseInt(obj.yAxis),
                w: parseInt(obj.wAxis),
                h: parseInt(obj.hAxis),
                i: "" + obj.userRoleRefId,
                compentent: "" + obj.zjName,
                title: obj.title,
                icon: obj.zjIcon
              };

              this.layout.push(t);
            }
            // console.log(this.layout);
          }
        }).catch(err=>{
          console.log(err)
        });
        */
    }
  }
};
</script>
<style lang="scss" scoped>
.item {
  background: #fff;
  .title {
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
    color: #409eff;
    font-weight: 700;
    display: flex;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px;
    i {
      margin: 0 10px;
    }
    .del {
      cursor: pointer;
      i {
        color: red;
      }
    }
  }
  .content {
    height: calc(100% - 40px);
    overflow: auto;
  }

}
</style>
